<template>
  <div class="subsection-box all-center">
    <div
      v-for="(item, index) in list"
      :key="item.key"
      :class="{ 'active-font': index === currentIndex }"
      class="item-box van-ellipsis"
      @click="change(index)"
    >
      {{ item.name }}
    </div>
    <div
      class="active"
      :style="{
        left: currentIndex * 22.666667 + 3 + 'vw',
      }"
    ></div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    current: number
    list: { name: string; key: number | string }[]
  }>(),
  {
    current: 0,
  },
)

const emits = defineEmits(['change'])
const currentIndex = ref(props.current)

const change = (index: number) => {
  currentIndex.value = index
  emits('change', index)
}
</script>

<style scoped lang="scss">
.subsection-box {
  width: 394px;
  border-radius: 50px;
  background: var(--u-weak-gray-background-color);
  height: 100%;

  .item-box {
    box-sizing: border-box;
    position: relative;
    width: 170px;
    height: 58px;
    z-index: 2;
    font-family: 'PingFang SC';
    padding: 0 10px;
    font-size: var(--u-default-text-size);
    font-weight: 500;
    color: var(--u-default-text-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 58px;
  }

  .active-font {
    color: var(--u-module-background-color);
  }

  .active {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    width: 360px;
    height: 58px;
    background: var(--u-primary-text-color);
    transition: left 0.3s ease;
    border-radius: var(--u-larger-rounded);
  }
}
</style>
